<template>
  <div class="chart-container" ref="chart"></div>
</template>

<script setup>
import { onMounted, onUnmounted, useTemplateRef, watch, inject } from "vue";
import { use, init, graphic } from "echarts";
import { debounce } from "@/utils";
import { LineChart, BarChart, PieChart, GaugeChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { LabelLayout, UniversalTransition } from "echarts/features";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
  TransformComponent,
  DatasetComponent,
} from "echarts/components";
import { merge } from "@/utils";
const echarts = { use, init, graphic };
echarts.use([
  LineChart,
  BarChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  GaugeChart,
  // 必须
  CanvasRenderer,
  GridComponent,
  TransformComponent,
  DatasetComponent,
  LabelLayout,
  UniversalTransition,
]);
const globalConfig = inject("globalConfig");
// 定义暗色亮色模式
const thmemChartColor = {
  dark: {},
  light: {},
};

const defaultOptions = {
  // 折线图
  line: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // type: "line",
      },
    },
    // 图例
    legend: {
      right: "0%",
      textStyle: {
        fontSize: 16,
        color: "#4c9bfd",
      },
      data: [],
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [],
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#4c9bfd",
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
    },
    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "2%",
      containLabel: true, // 显示标尺(刻度)
      // show: true, // show是否显示直角坐标系的网格
      // borderColor: "rgba(0,240,255,0.3)", // 设置边框颜色,show为true才生效
    },
    color: ["#00f2f1", "#ed3f35", "#ff99c3"],
    series: [
      {
        data: [],
        type: "line",
        smooth: true,
        // areaStyle: {}, // 是否显示区域填充
        // 渐变填充
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     { offset: 0, color: "rgba(0,242,241,0.4)" },
        //     { offset: 1, color: "rgba(0,242,241,0)" },
        //   ]),
        // },
      },
    ],
  },
  // 柱形图
  bar: {
    // color: new echarts.graphic.LinearGradient( //LinearGradient线性渐变
    //   0,
    //   0,
    //   0,
    //   1, // (x1,y1)到(x2,y2)之间进行渐变
    //   [
    //     { offset: 0, color: "#00fffb" }, // 0:起始颜色
    //     { offset: 1, color: "#0061ce" }, // 1:结束颜色,离坐标轴近的点
    //   ]
    // ),
    tooltip: {
      trigger: "item", // 放到上图表触发
    },
    // 修改柱形图大小
    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "2%",
      containLabel: true, // 显示标尺(刻度)
      // show: true, // show是否显示直角坐标系的网格
      // borderColor: "rgba(0,240,255,0.3)", // 设置边框颜色,show为true才生效
    },
    xAxis: [
      {
        type: "category", // category跟data的数据关联生成x轴
        data: [],
        axisTick: {
          alignWithLabel: false, //调整柱子在刻度中间
          show: false, //是否显示隐刻度
        },
        // 设置刻度文字样式
        axisLabel: {
          // color: "#4c9bfd",
        },
        // 设置坐标轴样式
        axisLine: {
          lineStyle: {
            // color: "rgba(0,240,255,0.3)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value", //value根据series里data生成y轴
        // 跟x轴一样
        axisTick: {
          alignWithLabel: false,
          show: false,
        },
        axisLabel: {
          // color: "#4c9bfd",
        },
        axisLine: {
          lineStyle: {
            // color: "rgba(0,240,255,0.3)",
          },
        },
        // 设置y轴分割线的样式(横线)
        splitLine: {
          lineStyle: {
            // color: "rgba(0,240,255,0.3)",
          },
        },
      },
    ],
    series: [
      {
        name: "统计",
        type: "bar",
        barWidth: "60%",
        // data里不止可以存放数据,还可以存放对象用来修改对应的配置,可以修改单独柱形的样式
        data: [],
      },
    ],
  },
  // 饼图
  pie: {
    tooltip: {
      trigger: "item", // trigger触发方式,item没有坐标轴触发,axis坐标轴触发,none不触发
      formatter: "{a}<br />{b} : {c} ({d}%)",
      // a代表series系列的name
      // b代表series系列里data的name
      // c代表series系列里data的value
      // d代表当前数据所占的比例
    },
    color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff"],
    grid: {
      left: "2%",
      right: "2%",
      bottom: "2%",
      top: "2%",
      containLabel: true, // 显示标尺(刻度)
      // show: true, // show是否显示直角坐标系的网格
      // borderColor: "rgba(0,240,255,0.3)", // 设置边框颜色,show为true才生效
    },
    series: [
      {
        name: "占比", // 图表名称
        type: "pie", // 图表类型,饼图
        radius: ["10%", "90%"], // 百分比基于图表DOM元素的半径,第一个内半径,第二个外半径
        center: ["50%", "50%"], // 图表的位置
        roseType: "radius", // area面积模式 radius半径模式
        data: [
          {
            value: 20,
            name: "标准1",
          },
          {
            value: 26,
            name: "标准2",
          },
          {
            value: 24,
            name: "标准3",
          },
          {
            value: 25,
            name: "标准4",
          },
          {
            value: 20,
            name: "标准5",
          },
        ], // 数据集,value数据值,name数据名称
        // 饼型图设置文字的css样式
        label: {
          fontSize: 14,
        },
        // 设置引导线
        labelLine: {
          length: 10, // 两条引导线的长度
          length2: 12,
        },
      },
    ],
  },
  // 仪表盘
  gauge: {
    series: [
      {
        type: "gauge",
        progress: {
          show: true,
          width: 10,
        },
        axisLine: {
          lineStyle: {
            width: 10,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 10,
          lineStyle: {
            width: 1,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 25,
          color: "#999",
          fontSize: 14,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 10,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 18,
          offsetCenter: [0, "80%"],
        },
      },
    ],
  },
};

const props = defineProps({
  chartType: {
    type: String,
    default: "line",
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const chartContainer = useTemplateRef("chart");
const debounceResize = debounce(handleResize, 300);

let chartInstance = null;
onMounted(() => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    chartInstance.setOption(getOptions());
    window.addEventListener("resize", debounceResize);
  }
});

function getOptions() {
  const options = {};
  merge(options, defaultOptions[props.chartType] || {});
  merge(options, props.options);
  return options;
}

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  window.removeEventListener("resize", debounceResize);
});

watch(
  () => [props.chartType, props.options],
  () => {
    if (chartInstance) {
      chartInstance.setOption(getOptions());
    }
  },
  { deep: true }
);

function handleResize() {
  chartInstance && chartInstance.resize();
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>
